<template>
  <view>
    <m-top
      :autoBack="true"
      :bgChangeByScroll="true"
      bgColor="#8C82FF"
      @getHeight="getGlHeight"
    >
      <view class="c333 font32 fw500">论坛详情</view>
    </m-top>

    <m-container :top="glTop">
      <view class="mgt32 pdv40">
        <u-swiper :list="list" height="300rpx"></u-swiper>
        <!--  -->
        <view class="mgt20 flex align-center text-card">
          <view class="font36 text-ell c333 fw500"
            >{{ detail.tmf_name }}
          </view>
          <view
            class="btn mglauto c481 font28"
            @click="bookingHandler"
            v-if="!detail.isReserve"
          >
            预约
          </view>
        </view>

        <!--  -->
        <view class="mgt20">
          <panel-infocard :option="infoObj"></panel-infocard>
        </view>
        <!--  -->
        <view class="mgt20">
          <panel-title>日程</panel-title>
          <view class="mgt20">
            <panel-process :options="scheduleInfo"></panel-process>
          </view>
        </view>
      </view>
    </m-container>
  </view>
</template>

<script>
import GlTopMixin from "@/mixins/global-top";
import PanelInfocard from "../conference/components/card-info.vue";
import PanelProcess from "@/pages-details/conference/components/card-process.vue";
import PanelTitle from "@/pages/index/components/title";
import { getForumsDetailApi,getScheduleInfoApi,forumBookingApi } from "@/api/modules/homepage.js";
export default {
  mixins: [GlTopMixin],
  components: { PanelInfocard, PanelProcess, PanelTitle },
  data() {
    return {
      detail: {
        isReserve: 0
      },
      list: [
        
      ],
      scheduleInfo: []
    };
  },

  computed: {
    infoObj() {
      return {
        tmi_prov_name: this.detail.tmf_prov_name,
        tmi_city_name: this.detail.tmf_city_name,
        tmi_region_name: this.detail.tmf_region_name,
        tmi_address: this.detail.tmf_address,
        tmi_desp: this.detail.tmf_desp,
        tmf_time_range: this.detail.tmf_time_range,
        tmf_inside_map: this.detail.tmf_inside_map,
        tmf_latitude: this.detail.tmf_latitude,
        tmf_longitude: this.detail.tmf_longitude
      }
    }
  },

  async onLoad(options) {
    this.mId = options.mId;
    this.meetingId = options.meetingId;
    uni.showLoading({
      title: '加载中'
    });
    this.getScheduleInfo()
    try {
      const response = await getForumsDetailApi(options.mId);
      console.log(response);
      this.detail = response.detail || {}
      this.list.splice(0, 1, this.getImgUrl(this.detail.tmf_icon))
    } catch (error) {}
    uni.hideLoading();
  },

  methods: {
    async getScheduleInfo() {
      const response = await getScheduleInfoApi({
        tsi_head_id: this.mId,
        tsi_type: 2
      })
      this.scheduleInfo = response.list || [];
    },

    async bookingHandler() {
      uni.showLoading({title: '加载中...'})
      try {
        await forumBookingApi({
          tmf_id: this.mId,
          tmf_meeting_id: this.meetingId
        })
        this.$u.toast('预约成功')
        this.detail.isReserve = 1
        await this.$u.sleep(2000)
      } catch (error) {
        
      }
      uni.hideLoading()
    }
  },
};
</script>

<style lang="scss" scoped>
.text-card {
  .btn {
    background: rgba(#481ec1, 0.1);
    border-radius: 28rpx;
    padding: 8rpx 32rpx;
    flex-shrink: 0;
  }
}
</style>
